<template>
    <div class="rightPart">
        <div class="title">
            <img class="title_icon icon_left" src="@/assets/images/dailyMaintenance/l_bt.png" alt="">
            <span class="title_text">设备系统运维质量</span>
            <img class="title_icon icon_right" src="@/assets/images/dailyMaintenance/r_bt.png" alt="">
        </div>
        <div class="searchBar">
            <el-select v-model="searchData.system" placeholder="请选择系统" popper-class="my_popper">
                <el-option v-for="item in systemOptions.list" :key="item.value" :label="item.label"
                    :value="item.value" />
            </el-select>
            <div class="navBar">
                <div class="nav_item" :class="{ 'nav_active': searchIndex == 0 }" @click="changeIndex(0)">近30日</div>
                <div class="nav_item" :class="{ 'nav_active': searchIndex == 1 }" @click="changeIndex(1)">近3个月</div>
                <div class="nav_item" :class="{ 'nav_active': searchIndex == 2 }" @click="changeIndex(2)">近1年</div>
            </div>
            <el-date-picker v-model="searchData.dateValue" type="daterange" range-separator="~" start-placeholder="开始日期"
                end-placeholder="结束日期" unlink-panels />
        </div>
        <div class="status_item">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">服务响应情况</span>
                <span class="title_details">（报事报修类工单的处理情况）</span>
            </div>
            <div class="serviceRes">
                <div class="serviceRes_left">
                    <div class="done_box">
                        <div class="done_item done_left">
                            <span class="done_num">99</span>
                            <span class="done_text">已完成</span>
                        </div>
                        <div class="done_item done_right">
                            <span class="done_num">120</span>
                            <span class="done_text">总数</span>
                        </div>
                    </div>
                    <div class="completionRatio">
                        <div class="completionRatio_title">
                            <span>工单完成比</span>
                        </div>
                        <div class="completionRatio_text">
                            <span class="ratio">99.1%</span>
                            <span>同比</span>
                            <span class="growthRate">18%</span>
                        </div>
                    </div>
                </div>
                <div class="serviceRes_right">
                    <lineChart_processingTime :data="chartData.data"></lineChart_processingTime>
                </div>
            </div>
        </div>
        <div class="status_item runCondition">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">设备运行情况</span>
            </div>
            <div class="run_content">
                <div class="run_item">
                    <div class="item_tittle">正常运行时间/计划作业时间</div>
                    <el-progress :text-inside="true" :percentage="90" color="rgba(0,227,254,0.99)">
                        <div class="innerBox"></div>
                    </el-progress>
                    <div class="run_text">正常运行时间：90%</div>
                </div>
                <div class="run_item">
                    <div class="item_tittle">故障时间/计划作业时间</div>
                    <el-progress :text-inside="true" :percentage="70" color="rgba(0,227,254,0.99)">
                        <div class="innerBox"></div>
                    </el-progress>
                    <div class="run_text">正常运行时间：70%</div>
                </div>
                <div class="run_item">
                    <div class="item_tittle">停机时间/计划作业时间</div>
                    <el-progress :text-inside="true" :percentage="30" color="rgba(0,227,254,0.99)">
                        <div class="innerBox"></div>
                    </el-progress>
                    <div class="run_text">正常运行时间：30%</div>
                </div>
            </div>
        </div>
        <div class="status_item maintenanceCondition">
            <div class="status_title">
                <img class="historyData_icon" src="@/assets/images/dailyMaintenance/historyData_icon.png" alt="">
                <span class="title_text">设备维护情况</span>
            </div>
            <div class="maintenance_title">维护保养类任务的完成情况（已完成/总数）</div>
            <div class="maintenance_content">
                <div class="maintenance_left">
                    <div class="left_title">38/120</div>
                    <pieChart_maintenance :data="chartData.data2"></pieChart_maintenance>
                </div>
                <div class="maintenance_right">
                    <barChar :data="chartData.data3"></barChar>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import lineChart_processingTime from "./lineChart_processingTime.vue";
import pieChart_maintenance from "./pieChart_maintenance.vue";
import barChar from "./barChar.vue";
let searchData = reactive({
    system: "",
    dateValue: ''
})
let systemOptions = reactive({
    list: [
        {
            value: '1',
            label: '锅炉系统',
        },
        {
            value: '2',
            label: '汽机系统',
        },
    ]
})

const chartData = reactive({
    data: [
        { date: '2', value: 50 },
        { date: '4', value: 210 },
        { date: '6', value: 200 },
        { date: '8', value: 150 },
        { date: '10', value: 130 },
        { date: '12', value: 160 },
        { date: '14', value: 100 },
        { date: '16', value: 120 },
        { date: '18', value: 130 },
        { date: '20', value: 110 },
        { date: '22', value: 120 },
        { date: '24', value: 60 },
        { date: '26', value: 150 },
        { date: '28', value: 70 },
        { date: '30', value: 30 },
    ] as any,
    data2: [
        { value: '38', name: '已完成' },
        { value: "82", name: '未完成' },
    ],
    data3: [
        { date: '锅炉燃烧系统', value: 85 },
        { date: '主蒸汽系统', value: 55 },
        { date: '锅炉燃烧系统', value: 60 },
        { date: '锅炉燃烧系统', value: 33 },
        { date: '锅炉燃烧系统', value: 90 },
        { date: '锅炉燃烧系统', value: 28 },
        { date: '锅炉燃烧系统', value: 75 },
        { date: '锅炉燃烧系统', value: 66 },
        { date: '锅炉燃烧系统', value: 39 },
        { date: '锅炉燃烧系统', value: 39 },
        { date: '锅炉燃烧系统', value: 39 },
        { date: '锅炉燃烧系统', value: 39 },
        { date: '锅炉燃烧系统', value: 39 },
        { date: '锅炉燃烧系统', value: 39 },
    ]
})

let searchIndex = ref(0);

//切换时间筛选
const changeIndex = (index: number) => {
    if (searchIndex.value != index) {
        searchIndex.value = index;
    }
}

</script>

<style lang="scss" scoped>
.rightPart {
    position: absolute;
    z-index: 999;
    background: url(@/assets/images/dailyMaintenance/r_bg.png) no-repeat;
    background-size: 100% 100%;
    right: vw(20);
    top: vh(85);
    width: vw(1437);
    height: vh(920);
    font-size: vh(14);
    color: #FFFFFF;
    padding: vh(24) vw(22);

    .title {
        display: flex;
        align-items: center;
        justify-content: center;

        .title_icon {
            height: vw(12);
            width: auto;
        }

        .title_text {
            margin-left: vw(11);
            margin-right: vw(11);
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vw(18);
            color: #00E3FE;
            line-height: 1;
        }
    }

    .searchBar {
        display: flex;
        margin-top: vh(20);
        margin-bottom: vh(20);

        :deep(.el-select) {
            width: vh(119);
            height: vh(22);

            .el-select__wrapper {
                width: 100%;
                height: 100%;
                min-height: 0;
                line-height: vh(22);
                font-size: vh(10);
                background: rgba(0, 192, 255, 0.2);
                border-radius: vh(3);
                box-shadow: none;
                //    border: 1px solid #00CCE4;
                border: 1px solid rgba(0, 192, 255, 0.5);

                .el-select__icon {
                    font-size: vh(12);
                    color: #00E3FE;
                }

                .el-select__selected-item {
                    color: #D3E0E2;
                }
            }
        }

        .navBar {
            display: flex;
            margin-left: vh(20);

            .nav_item {
                height: vh(22);
                padding: 0 vh(10);
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #94BCC4;
                line-height: vh(22);
                background: rgba(0, 227, 254, 0.2);
                border-radius: vh(4);
                margin-right: vh(10);
                display: flex;
                align-items: center;
                cursor: pointer;

                &.nav_active {
                    border: 1px solid #00E3FE;
                    color: #00D6FF;
                }
            }
        }

        :deep(.el-date-editor) {
            width: vh(180);
            height: vh(22);
            display: flex;
            flex-grow: 0;
            padding: 0 vh(10);
            background: rgba(0, 192, 255, 0.2);
            // border: 1px solid #00CCE4;
            border: 1px solid rgba(0, 204, 228, 0.5);
            border-radius: vh(3);
            box-shadow: none;

            .el-range__icon {
                font-size: vh(14);
            }

            .el-range-input {
                font-size: vh(10);
                height: vh(22);
                line-height: vh(22);
                color: #fff;
            }

            .el-range__close-icon {
                font-size: vh(10);
            }

            .el-range-separator {
                font-size: vh(10);
                padding: 0 vh(5);
                color: #fff;
            }
        }
    }

    .status_item {
        .status_title {
            // margin-bottom: vh(26);
            margin-bottom: vh(13);

            .historyData_icon {
                margin-right: vh(10);
                vertical-align: sub;
            }

            .title_text {
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: vh(14);
                color: #FFFFFF;
                line-height: 1;
            }

            .title_details {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #00B0D4;
            }
        }

        .serviceRes {
            display: flex;

            .serviceRes_left {
                width: vw(208);
                padding-top: vh(18);

                .done_box {
                    width: vw(208);
                    height: vh(70);
                    background: rgba(0, 227, 254, 0.1);
                    border-radius: vh(8);
                    border: 1px solid #00E3FE;
                    padding: vh(13) 0;
                    display: flex;

                    .done_item {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        justify-content: center;
                        align-items: center;

                        &:first-child {
                            border-right: 1px solid rgba(255, 255, 255, 0.5);
                        }

                        .done_num {
                            font-family: DIN;
                            font-weight: bold;
                            font-size: vh(24);
                            color: #FFAC00;
                            line-height: vh(18);
                            margin-bottom: vh(11);
                        }

                        .done_text {
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            font-size: vh(14);
                            color: #FFFFFF;
                            line-height: 1;
                        }
                    }
                }

                .completionRatio {
                    .completionRatio_title {
                        margin-top: vh(29);
                        margin-bottom: vh(16);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(14);
                        color: #FFFFFF;
                        line-height: 1;
                    }

                    .completionRatio_text {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(12);
                        color: #FFFFFF;
                        line-height: 1;

                        .ratio {
                            font-family: DIN;
                            font-weight: bold;
                            font-size: vh(24);
                            color: #FFAC00;
                            line-height: 1;
                            margin-right: vw(16);
                        }

                        .growthRate {
                            font-family: DIN;
                            font-weight: bold;
                            font-size: vh(16);
                            color: #00E486;
                            margin-left: vw(15);
                        }
                    }
                }
            }

            .serviceRes_right {
                flex: 1;
            }
        }

        &.runCondition {
            margin-top: vh(25);

            .run_content {
                display: flex;

                .run_item {
                    flex: 1;
                    height: vh(83);
                    background: rgba(0, 227, 254, 0.1);
                    margin-right: vw(82);
                    padding: vh(15) vw(18);

                    &:last-child {
                        margin-right: 0;
                    }

                    .item_tittle {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(12);
                        color: #00E3FE;
                        line-height: 1;
                        margin-bottom: vh(10);
                    }

                    :deep(.el-progress) {
                        .el-progress-bar {
                            .el-progress-bar__outer {
                                height: vh(4) !important;
                                border-radius: 0;
                                background-color: rgba(255, 255, 255, 0.1);

                                .el-progress-bar__inner {
                                    border-radius: 0;

                                    .el-progress-bar__innerText {
                                        margin: 0;
                                        vertical-align: top;

                                        .innerBox {
                                            width: vw(4);
                                            height: vh(4);
                                            background: #FFFFFF;
                                        }
                                    }

                                }
                            }
                        }
                    }

                    .run_text {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: vh(12);
                        color: #FFFFFF;
                        margin-top: vh(14);
                        line-height: 1;
                    }
                }
            }
        }

        &.maintenanceCondition {
            margin-top: vh(44);

            .maintenance_title {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(14);
                color: #00E3FE;
            }

            .maintenance_content {
                display: flex;

                .maintenance_left {
                    width: vh(288);

                    .left_title {
                        font-family: DIN;
                        font-weight: bold;
                        font-size: vh(26);
                        color: #FFAC00;
                        line-height: 1;
                        text-align: center;
                        margin-top: vh(20);
                        margin-bottom: vh(24);
                    }
                }

                .maintenance_right {
                    flex: 1;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.my_popper {
    .el-select-dropdown__item {
        font-size: vw(14);
        height: vw(34);
        line-height: vw(34);
        padding-left: vw(10);
    }
}
</style>
